<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
</head>
<body>
<h3>事件委托</h3>
<p>
    事件委托: 是利用事件流的特征 解决一些开发需求的知识技巧 <br>
    优点：减少注册(监控事件)次数，可以提高程序性能 <br>
    原理：事件委托 其实是利用事件冒泡的特点。 <br>
    给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
</p>
<p>
    实现：
    事件对象.target  可以获得真正 触发事件的对象
    .tagName 可以获得真正 触发事件的 标签名
</p>
<hr>

<pre style="font-size: 20px;">
总结:
1. 事件委托的好处是什么？
    减少注册次数，提高了程序性能
2. 事件委托是委托给了谁？父元素还是子元素？
    父元素
3. 如何找到真正触发的元素？
    事件对象.target.tagName
</pre>

 <ul>
     列表
    <li>第1个li</li>
    <li>第2个li</li>
    <li>第3个li</li>
    <li>第4个li</li>
    <li>第5个li</li>
    <p>我不需要变色</p>
  </ul>

<script>
    // -------- 示例 点击每个小li 当前li 文字变为红色 -------
    // 按照事件委托的方式  委托给父级，事件写到父级身上
    // 1. 获得父元素
    const 父元素ul = document.querySelector('ul')
    // 监控 点击事件
    父元素ul.addEventListener('click', function (事件对象) {
      // console.dir(事件对象.target) // 控制台输出 看我们真正触发的 对象
      console.log(事件对象.target) // target是一个属性, 返回触发事件的对象

      // 我的需求，我们只要点击li才会有效果
      if (事件对象.target.tagName === 'LI') { //tagName 触发事件的 标签名
        事件对象.target.style.color = 'red' // 得到子级对象.  这里是修改文字颜色
      }
    })
</script>
</body>
</html>